<template>
  <el-dialog
    v-model="dialogVisible"
    title="终止"
    width="430"
    class="qc-custom-dialog"
  >
    <div class="dialog-tip">提示：活动终止后不可恢复，请谨慎操作！</div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      class="dialog-form-wrap"
    >
      <el-form-item label="终止原因" prop="reason">
        <el-input
          v-model.trim="ruleForm.reason"
          placeholder="请输入活动终止原因"
          maxlength="200"
          type="textarea"
          :rows="3"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" v-btnAntiShake="onSubmit"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup name="dialog-stop">
import type { FormInstance, FormRules } from 'element-plus';
import { terminateUser } from '@/service/apis/market';

const ruleFormRef = ref<FormInstance>();

let dialogVisible = ref(false);

interface Props {
  type: number; // 活动类型 1:注册活动 2:充值活动 3:首次充电活动 4:组团充电活动 5:单次消费活动 6:累计消费活动 7:分享活动 8:扫码领券活动
}
const prop = withDefaults(defineProps<Props>(), {
  type: 1,
});

let ruleForm = reactive({
  id: '',
  reason: '',
});

const rules = reactive<FormRules>({
  reason: [{ required: true, message: '请输入活动终止原因', trigger: 'blur' }],
});

const show = (row: any) => {
  ruleForm.id = row.id;
  ruleForm.reason = '';
  dialogVisible.value = true;
};
const hide = () => {
  dialogVisible.value = false;
};

const emit = defineEmits(['get-data']);
const onSubmit = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      const from = {
        id: ruleForm.id,
        type: prop.type,
        reason: ruleForm.reason,
      };
      terminateUser(from).then((res: any) => {
        hide();
        emit('get-data');
      });
    } else {
      console.log('error submit!', fields);
    }
  });
};

defineExpose({
  show,
});
</script>
